<template>
  <div class="form_container">
    <div class="dashboard">
      <el-radio-group v-model="labelPosition" label="label position" class="item">
        <el-radio-button label="left">Left</el-radio-button>
        <el-radio-button label="right">Right</el-radio-button>
        <el-radio-button label="top">Top</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="size" label="size control">
        <el-radio-button label="large">large</el-radio-button>
        <el-radio-button label="default">default</el-radio-button>
        <el-radio-button label="small">small</el-radio-button>
      </el-radio-group>
      <el-button @click="isInline" class="item">是否是行内表单</el-button>
      <el-switch
        active-text="启用表单"
        inactive-text="禁用表单"
        :active-value="false"
        :inactive-value="true"
        :inline-prompt="true"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        width="80px"
        v-model="isDisabled"
      >
      </el-switch>
    </div>
    <FormBasicComponent
      ref="formBasic"
      :inline="inline"
      :form-item-props-config="formItemPropsConfig"
      :label-position="labelPosition"
      :size="size"
      :echo="echo"
      :rules="rules"
      :disabled="isDisabled"
      @on-swicth-change="onSwitchChange"
      @on-submit="onSubmit"
    >
      <template #handle>
        <el-button type="primary" @click="submit">查询</el-button>
      </template>
    </FormBasicComponent>
  </div>
</template>
<script setup lang="ts">
import FormBasicComponent from "@/components/form/FormBasicComponent.vue";
import { datePickTypes, ElMessage } from "element-plus";
import type { FormItemPropsConfig } from "types/components/form";
import { reactive, ref } from "vue";
const labelPosition = ref<"right" | "left" | "top">("right");
const size = ref<"default" | "small" | "large">("default");
const inline = ref(false);
const isDisabled = ref(false);
function isInline() {
  inline.value = !inline.value;
}
const rules = reactive({
  name: [{ required: true, message: "请填写姓名" }],
  age: [{ required: true, message: "请填写年龄" }],
  sex: [{ required: true, message: "请选择性别" }],
});
const formItemPropsConfig: Array<FormItemPropsConfig> = [
  {
    label: "姓名",
    vModel: "name",
    placeholder: "我是测试数据填充",
    defaultValue: "张三",
  },
  {
    label: "年龄",
    vModel: "age",
    placeholder: "",
  },
  {
    label: "地址",
    vModel: "addresss",
    placeholder: "请填写地址",
  },
  {
    label: "性别",
    vModel: "sex",
    type: "select",
    defaultValue: 1,
    selectList: [
      {
        label: "男",
        value: 1,
      },
      {
        label: "女",
        value: 0,
      },
    ],
    onSelectChang: onSelectChange,
  },
  {
    label: "兴趣爱好",
    vModel: "hobby",
    type: "checkbox",
    checkboxList: ["游泳", "下棋", "打乒乓球", "看动漫", "小说"],
    onCheckboxChange: onCheckboxChange,
  },
  {
    label: "婚姻状态",
    vModel: "married",
    type: "switch",
    activeText: "已婚",
    inActiveText: "未婚",
    activeColor: "green",
    inActiveColor: "red",
    inlinePrompt: true,
    width: "60px",
    onSwicthChange: onSwitchChange,
  },
  {
    label: "学历",
    vModel: "radio",
    type: "radio",
    radioList: ["高职", "大专", "本科"],
    onRadioChange: onRadioChange,
  },
  {
    label: "出生日期",
    vModel: "date",
    type: "date",
    placeholder: "请选择出生日期",
    dateType: datePickTypes[5],
    format: "YYYY-MM-DD",
    valueFormat: "YYYY-MM-DD",
  },
  {
    label: "人生名言",
    vModel: "bw",
    type: "textarea",
    placeholder: "请填写人生名言",
  },
];
const echo = ref({
  // name: "张三",
  // date: "2022-08-07",
  // bw: "我们都知道, 只要有意义, 那么就必须慎重考虑.随机一段废话的发生, 到底需要如何做到, 不随机一段废话的发生, 又会如何产生. 我们不得不面对一个非常尴尬的事实, 那就是, 维龙说过一句著名的话, 要成功不需要什么特别的才能，只要把你能做的小事做得好就行了。我希望诸位也能好好地体会这句话. 问题的关键究竟为何? 现在, 解决随机一段废话的问题, 是非常非常重要的. 所以, 就我个人来说, 随机一",
  // radio: "测试2",
  // hobby: ["打乒乓球", "下棋"],
  // sex: 1,
});
function onSwitchChange(val: any) {
  ElMessage({
    type: "success",
    message: `onSwitchChange事件触发后，切换后的值：·${val}`,
    duration: 1500,
  });
}
function onSelectChange(val: any) {
  ElMessage({
    type: "success",
    message: `onSelectChange事件触发后，下拉框中的值：${val}`,
    duration: 1500,
  });
}
function onCheckboxChange(val: any) {
  ElMessage({
    type: "success",
    message: `onCheckboxChange事件触发后，复选框选中的值：${val}`,
    duration: 1500,
  });
}
function onRadioChange(val: any) {
  ElMessage({
    type: "success",
    message: `onRadioChangee事件触发后，单选框选中的值：${val}`,
    duration: 1500,
  });
}
const formBasic = ref();
function onSubmit(val: any) {
  console.log("表单提交信息：", val);
  ElMessage({
    type: "success",
    message: `表单提交信息：${val}`,
    duration: 1500,
  });
}
function submit() {
  formBasic.value.submit(formBasic.value.$refs.formRef);
}
</script>
<style lang="scss" scoped>
.form_container {
  background-color: #fff;
  .dashboard {
    display: flex;
    align-items: center;
    height: 60px;
    .item {
      margin: 0 15px;
    }
  }
}
</style>
